// 导入React
import React from 'react';

/**
 * 受控组件示例
 * 注意 复选框 是根据 checked 属性获取状态值的
 */
export class App extends React.Component {
  constructor() {
    super();
    // 表单状态
    this.state = {
      txt: 'xx',
      content: '文本域',
      city: 'bj',
      isChecked: false, // 复选框
      gender: '男',
    };
  }

  // 文本变化
  handleChange = (e) => {
    // 改变state
    this.setState({
      txt: e.target.value,
    });
  };
  // 文本域化
  handleContent = (e) => {
    // 改变state
    this.setState({
      content: e.target.value,
    });
  };
  // 城市变化
  handleCity = (e) => {
    // 改变state
    this.setState({
      city: e.target.value,
    });
  };

  // 复选框
  handleIsChecked = (e) => {
    // 改变state
    this.setState({
      isChecked: e.target.checked,
    });
  };
  // radio
  handleRadioChange = (e) => {
    // 改变state
    this.setState({
      gender: e.target.value,
    });
  };

  render() {
    return (
      <div>
        {/* 文本框 */}
        <input
          type="text"
          value={this.state.txt}
          onChange={this.handleChange}
        ></input>
        <hr />

        {/* 文本域 */}
        <textarea
          value={this.state.content}
          onChange={this.handleContent}
        ></textarea>
        <hr />

        {/* 下拉框 */}
        <select value={this.state.city} onChange={this.handleCity}>
          <option value="sh">上海</option>
          <option value="bj">北京</option>
          <option value="gz">广州</option>
        </select>
        <hr />

        {/* 复选框 */}
        <input
          id="scales"
          type="checkbox"
          checked={this.state.isChecked}
          onChange={this.handleIsChecked}
        ></input>
        <label htmlFor="scales">Scales</label>
        <hr />

        {/* radio */}
        <div>
          男
          <input
            type="radio"
            name="gender"
            value="男"
            checked={this.state.gender === '男'}
            onChange={this.handleRadioChange}
          />
          女
          <input
            type="radio"
            name="gender"
            value="女"
            checked={this.state.gender === '女'}
            onChange={this.handleRadioChange}
          />
        </div>
        <hr />
        <button onClick={() => console.log(this.state)}>提交</button>
      </div>
    );
  }
}

export default App;
